<template>
  <Card>
    <Api ref="apiRef" :load="pageRole" v-slot="{ input }">
      <Space direction="vertical">
        <Cond>
          <CondItem title="关键字" field="keyword">
            <Input v-model="input.params.keyword" placeholder="名称/key" />
          </CondItem>
          <CondItem title="应用" field="appId"></CondItem>
          <template #op>
            <Button shape="circle" type="primary" @click="onCreate">
              <IconPlus />
            </Button>
          </template>
        </Cond>
        <Table>
          <TableColumn title="名称" field="name" align="left">
            <template #cell="{ row }">
              <Popover position="right">
                <Button isText>{{ row.name }}</Button>
                <template #content>
                  <Space>
                    <Button @click="onCreate(row)" text="编辑" />
                    <Button @click="onDelete(row.id)" text="删除" />
                  </Space>
                </template>
              </Popover>
            </template>
          </TableColumn>
          <TableColumn title="Key" field="key" align="left" />
          <TableColumn title="备注" field="remark" />
          <TableColumn title="应用" field="appName" />
          <TableColumn title="创建日期" :width="170" field="createdAt" type="Datetime" />
          <TableColumn title="更新日期" :width="170" field="updatedAt" type="Datetime" />
        </Table>
      </Space>
    </Api>
  </Card>
</template>

<script setup lang="ts">
import { Button, Card, Cond, CondItem, Input, Popover, Space, Table, TableColumn } from '@idmy/ui'
import { IconPlus } from '@idmy/ui-icon'
import { deleteRole, pageRole } from './services'
import { Api, useDelete } from '@idmy/core'
import Create from '../create/index.vue'

const apiRef = ref()
const onLoad = () => apiRef.value.onLoad()

const onCreate = model =>
  Modal.open({
    component: Create,
    title: model.id ? '修改角色' : '创建角色',
    width: 2,
    props: {
      model,
    },
    onClose: isOk => isOk && onLoad(),
  })

const onDelete = useDelete(deleteRole, onLoad)
</script>
